import React, { useEffect } from "react";

import { useSelector, useDispatch } from "react-redux";

const Index = () => {
  // 分了模块化以后，那么state就需要添加模块名称才能拿到
  const count = useSelector((state) => state.city.count);
  const list = useSelector((state) => state.city.list);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({ type: "loadAction" });
  }, [dispatch]);

  return (
    <>
      <div>这是城市选择页</div>
      <button onClick={() => dispatch({ type: "minusAction" })}>-</button>
      <span>{count}</span>
      {/* 加上saga中间件以后，type的值，就变成了sagas的takeEvery的值了 */}
      <button onClick={() => dispatch({ type: "addAction", num: 2 })}>+</button>

      <hr />

      <ul>
        {list.map((item) => (
          <li key={item._id}>{item.title}</li>
        ))}
      </ul>
    </>
  );
};

export default Index;
